{% extends 'base.html' %}
{% load static %}

{% block title %}预警详情 - {{ alert.consumable.name }}{% endblock %}

{% block extra_css %}
<style>
    .alert-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }
    .alert-header.urgent {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    }
    .alert-header.high {
        background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
    }
    .alert-header.medium {
        background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
    }
    .alert-header.low {
        background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);
    }
    .info-card {
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .info-card .card-header {
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        font-weight: 600;
    }
    .status-timeline {
        position: relative;
        padding-left: 30px;
    }
    .status-timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -23px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #007bff;
        z-index: 1;
    }
    .timeline-item.completed::before {
        border-color: #28a745;
        background: #28a745;
    }
    .timeline-item.current::before {
        border-color: #ffc107;
        background: #ffc107;
    }
    .progress-ring {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    .progress-ring-circle {
        stroke-width: 6;
        fill: transparent;
        stroke-dasharray: 251;
        stroke-dashoffset: 251;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }
    .stock-gauge {
        position: relative;
        display: inline-block;
    }
    .stock-gauge-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
        font-size: 14px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{% url 'assets:inventory_alert_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> 返回预警列表
            </a>
        </div>
    </div>

    <!-- 预警头部信息 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="alert-header {{ alert.priority }}">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h3 class="mb-2">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ alert.consumable.name }}
                            </h3>
                            <p class="mb-0 opacity-75">{{ alert.message }}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="d-flex justify-content-end align-items-center">
                                <div class="stock-gauge me-3">
                                    <svg class="progress-ring" viewBox="0 0 80 80">
                                        <circle class="progress-ring-circle" 
                                                cx="40" cy="40" r="36"
                                                stroke="#ffffff40" stroke-width="6" fill="transparent"/>
                                        <circle class="progress-ring-circle" 
                                                cx="40" cy="40" r="36"
                                                stroke="#ffffff" 
                                                style="stroke-dashoffset: calc(251 - (251 * {{ alert.consumable.get_stock_percentage }}) / 100);"/>
                                    </svg>
                                    <div class="stock-gauge-text text-white">
                                        {{ alert.consumable.get_stock_percentage }}%
                                    </div>
                                </div>
                                <div>
                                    <span class="badge badge-light fs-6">
                                        {{ alert.get_priority_display }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧：预警信息和耗材详情 -->
        <div class="col-md-8">
            <!-- 预警基本信息 -->
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-info-circle text-primary"></i> 预警信息
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted">预警类型：</td>
                                    <td>
                                        <span class="badge 
                                            {% if alert.alert_type == 'out_of_stock' %}badge-danger
                                            {% elif alert.alert_type == 'low_stock' %}badge-warning
                                            {% elif alert.alert_type == 'reorder_point' %}badge-info
                                            {% else %}badge-secondary{% endif %}">
                                            {{ alert.get_alert_type_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">优先级：</td>
                                    <td>
                                        <span class="badge 
                                            {% if alert.priority == 'urgent' %}badge-danger
                                            {% elif alert.priority == 'high' %}badge-warning
                                            {% elif alert.priority == 'medium' %}badge-info
                                            {% else %}badge-secondary{% endif %}">
                                            {{ alert.get_priority_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">当前状态：</td>
                                    <td>
                                        <span class="badge 
                                            {% if alert.status == 'active' %}badge-danger
                                            {% elif alert.status == 'acknowledged' %}badge-warning
                                            {% elif alert.status == 'resolved' %}badge-success
                                            {% else %}badge-secondary{% endif %}">
                                            {{ alert.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted">创建时间：</td>
                                    <td>{{ alert.created_at|date:"Y-m-d H:i:s" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">当前数量：</td>
                                    <td><strong class="text-danger">{{ alert.current_quantity }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">阈值数量：</td>
                                    <td>{{ alert.threshold_quantity }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 耗材详细信息 -->
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-box text-success"></i> 耗材详情
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted">耗材名称：</td>
                                    <td><strong>{{ alert.consumable.name }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">耗材编码：</td>
                                    <td>{{ alert.consumable.code }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">所属类别：</td>
                                    <td>{{ alert.consumable.category.name }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">存储仓库：</td>
                                    <td>{{ alert.consumable.warehouse.name }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted">当前库存：</td>
                                    <td><strong class="text-primary">{{ alert.consumable.quantity }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">最小库存：</td>
                                    <td>{{ alert.consumable.min_quantity }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">最大库存：</td>
                                    <td>{{ alert.consumable.max_quantity }}</td>
                                </tr>
                                {% if alert.consumable.reorder_point %}
                                <tr>
                                    <td class="text-muted">补货点：</td>
                                    <td>{{ alert.consumable.reorder_point }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                    
                    <!-- 库存状态进度条 -->
                    <div class="mt-3">
                        <label class="form-label">库存状态</label>
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar 
                                {% if alert.consumable.get_stock_percentage <= 10 %}bg-danger
                                {% elif alert.consumable.get_stock_percentage <= 25 %}bg-warning
                                {% elif alert.consumable.get_stock_percentage <= 50 %}bg-info
                                {% else %}bg-success{% endif %}" 
                                role="progressbar" 
                                style="width: {{ alert.consumable.get_stock_percentage }}%">
                                {{ alert.consumable.get_stock_percentage }}%
                            </div>
                        </div>
                        <small class="text-muted">
                            当前: {{ alert.consumable.quantity }} / 最大: {{ alert.consumable.max_quantity }}
                        </small>
                    </div>

                    {% if alert.consumable.supplier %}
                    <div class="mt-3">
                        <strong class="text-muted">供应商信息：</strong>
                        <p class="mb-0">
                            {{ alert.consumable.supplier.name }}
                            {% if alert.consumable.supplier.contact_person %}
                            - {{ alert.consumable.supplier.contact_person }}
                            {% endif %}
                            {% if alert.consumable.supplier.phone %}
                            - {{ alert.consumable.supplier.phone }}
                            {% endif %}
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 最近库存变动记录 -->
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-history text-info"></i> 最近库存变动
                </div>
                <div class="card-body">
                    {% if recent_logs %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>操作类型</th>
                                        <th>数量变化</th>
                                        <th>操作人</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for log in recent_logs %}
                                    <tr>
                                        <td>{{ log.created_at|date:"m-d H:i" }}</td>
                                        <td>
                                            <span class="badge 
                                                {% if log.operation_type == 'in' %}badge-success
                                                {% elif log.operation_type == 'out' %}badge-danger
                                                {% else %}badge-info{% endif %}">
                                                {{ log.get_operation_type_display }}
                                            </span>
                                        </td>
                                        <td>
                                            {% if log.operation_type == 'in' %}
                                                <span class="text-success">+{{ log.quantity }}</span>
                                            {% elif log.operation_type == 'out' %}
                                                <span class="text-danger">-{{ log.quantity }}</span>
                                            {% else %}
                                                {{ log.quantity }}
                                            {% endif %}
                                        </td>
                                        <td>{{ log.operator.username }}</td>
                                        <td>{{ log.notes|default:"-" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p>暂无库存变动记录</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧：操作面板和状态时间线 -->
        <div class="col-md-4">
            <!-- 操作面板 -->
            {% if can_manage %}
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-tools text-warning"></i> 操作面板
                </div>
                <div class="card-body">
                    {% if alert.status == 'active' %}
                        <form method="post" action="{% url 'assets:inventory_alert_acknowledge' alert.pk %}" class="mb-2">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-warning w-100">
                                <i class="fas fa-check"></i> 确认预警
                            </button>
                        </form>
                        <form method="post" action="{% url 'assets:inventory_alert_resolve' alert.pk %}" class="mb-2">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fas fa-check-double"></i> 解决预警
                            </button>
                        </form>
                        <form method="post" action="{% url 'assets:inventory_alert_ignore' alert.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-secondary w-100" 
                                    onclick="return confirm('确定要忽略此预警吗？')">
                                <i class="fas fa-times"></i> 忽略预警
                            </button>
                        </form>
                    {% elif alert.status == 'acknowledged' %}
                        <form method="post" action="{% url 'assets:inventory_alert_resolve' alert.pk %}" class="mb-2">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fas fa-check-double"></i> 解决预警
                            </button>
                        </form>
                        <form method="post" action="{% url 'assets:inventory_alert_ignore' alert.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-secondary w-100" 
                                    onclick="return confirm('确定要忽略此预警吗？')">
                                <i class="fas fa-times"></i> 忽略预警
                            </button>
                        </form>
                    {% else %}
                        <div class="text-center text-muted">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <p>预警已处理，无需操作</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- 状态时间线 -->
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-timeline text-primary"></i> 状态时间线
                </div>
                <div class="card-body">
                    <div class="status-timeline">
                        <div class="timeline-item completed">
                            <div class="timeline-content">
                                <h6 class="mb-1">预警创建</h6>
                                <small class="text-muted">{{ alert.created_at|date:"Y-m-d H:i:s" }}</small>
                            </div>
                        </div>
                        
                        {% if alert.acknowledged_at %}
                        <div class="timeline-item completed">
                            <div class="timeline-content">
                                <h6 class="mb-1">预警确认</h6>
                                <small class="text-muted">
                                    {{ alert.acknowledged_at|date:"Y-m-d H:i:s" }}
                                    {% if alert.acknowledged_by %}
                                    <br>by {{ alert.acknowledged_by.username }}
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                        {% elif alert.status == 'acknowledged' %}
                        <div class="timeline-item current">
                            <div class="timeline-content">
                                <h6 class="mb-1">预警确认</h6>
                                <small class="text-muted">待确认</small>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if alert.resolved_at %}
                        <div class="timeline-item completed">
                            <div class="timeline-content">
                                <h6 class="mb-1">预警解决</h6>
                                <small class="text-muted">
                                    {{ alert.resolved_at|date:"Y-m-d H:i:s" }}
                                    {% if alert.resolved_by %}
                                    <br>by {{ alert.resolved_by.username }}
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                        {% elif alert.status == 'resolved' %}
                        <div class="timeline-item current">
                            <div class="timeline-content">
                                <h6 class="mb-1">预警解决</h6>
                                <small class="text-muted">已解决</small>
                            </div>
                        </div>
                        {% else %}
                        <div class="timeline-item">
                            <div class="timeline-content">
                                <h6 class="mb-1 text-muted">预警解决</h6>
                                <small class="text-muted">待解决</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 建议操作 -->
            <div class="info-card card">
                <div class="card-header">
                    <i class="fas fa-lightbulb text-warning"></i> 建议操作
                </div>
                <div class="card-body">
                    {% if alert.alert_type == 'out_of_stock' %}
                        <div class="alert alert-danger">
                            <strong>紧急补货</strong><br>
                            耗材已缺货，建议立即联系供应商补货。
                        </div>
                        {% if alert.consumable.get_suggested_order_quantity %}
                        <p class="mb-2">
                            <strong>建议采购数量：</strong>
                            {{ alert.consumable.get_suggested_order_quantity }}
                        </p>
                        {% endif %}
                    {% elif alert.alert_type == 'low_stock' %}
                        <div class="alert alert-warning">
                            <strong>库存不足</strong><br>
                            建议尽快安排补货，避免影响正常使用。
                        </div>
                        {% if alert.consumable.get_suggested_order_quantity %}
                        <p class="mb-2">
                            <strong>建议采购数量：</strong>
                            {{ alert.consumable.get_suggested_order_quantity }}
                        </p>
                        {% endif %}
                    {% elif alert.alert_type == 'reorder_point' %}
                        <div class="alert alert-info">
                            <strong>达到补货点</strong><br>
                            库存已达到补货点，建议安排采购。
                        </div>
                        {% if alert.consumable.get_suggested_order_quantity %}
                        <p class="mb-2">
                            <strong>建议采购数量：</strong>
                            {{ alert.consumable.get_suggested_order_quantity }}
                        </p>
                        {% endif %}
                    {% endif %}
                    
                    {% if alert.consumable.supplier %}
                    <div class="mt-3">
                        <strong>联系供应商：</strong><br>
                        {{ alert.consumable.supplier.name }}
                        {% if alert.consumable.supplier.phone %}
                        <br><i class="fas fa-phone"></i> {{ alert.consumable.supplier.phone }}
                        {% endif %}
                        {% if alert.consumable.supplier.email %}
                        <br><i class="fas fa-envelope"></i> {{ alert.consumable.supplier.email }}
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 动画效果
    $('.info-card').each(function(index) {
        $(this).delay(index * 100).fadeIn(500);
    });
});
</script>
{% endblock %}
